<script setup lang="ts">
import { reactive, ref, watch } from 'vue'

const food = ref('薯条')
const drink = ref('可乐')

// 侦听器
watch(food, () => {
  console.log('Nice')
})

watch([food, drink], () => {
  console.log('unbelievable')
})

const foodObj = reactive({
  name: '张亮麻辣烫',
  price: 15,
  drink: {
    name: '可乐',
    price: 4,
  },
})

// 只监听某个属性的改变(基本类型)
// watch(
//   () => foodObj.price,
//   () => {
//     console.log('涨价啦')
//   },
// )

// 参数 1 设置监听的 数据,或者属性
// 参数 2 数据改变之后的回调函数
// 参数 3 一些配置,比如深度监听
watch(
  () => foodObj.drink,
  () => {
    console.log('饮料变了')
  },
  {
    deep: true, // 深度监听
    immediate: true, // 是否默认执行一次
  },
)
</script>

<template>
  <div>
    <h2 @click="food += '鸡翅'">{{ food }}</h2>
    <h2 @click="drink += '冰'">{{ drink }}</h2>
    <h2>{{ foodObj }}</h2>
    <button @click="foodObj.name += '!'">改名字</button>
    <button @click="foodObj.price++">改价格</button>
    <button @click="foodObj.drink.name += '冰'">可乐改名字</button>
    <button @click="foodObj.drink.price++">可乐改价格</button>
  </div>
</template>

<style></style>
